<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号———登录</title>
    <script src="jquery-3.2.1.js"></script>
    <link rel="stylesheet"  href="style_css/login.css">
    <link rel="icon" href="img/logo.ico" type="image/x-icon">
	<link rel="shortcut icon" href="img/logo.ico" type="image/x-icon">
	<link rel="icon" href="img/logo.ico" type="image/x-icon">
	<script type="text/javascript">
		function check(){
		    var username = document.getElementById("username").value;
		    var password = document.getElementById("password").value;
		    if(username == "admin" && password == "admin"){
		        return true;
		    } 
		    else if(username == ""){
		        alert("用户名为空");
		        return false;
		    }else if(password ==""){
		        alert("密码为空");
		        return false;
		    }else{
		        alert("用户名或密码错误");
		        return false;
		    }
		}
		document.onkeydown = keyDown;
		function keyDown(e) {
		// 当按下回车键，执行我们的代码
		    if (e.keyCode == 13) {
		       document.getElementById("loginbtn").click();
		    }
		}
	</script>
</head>
<body>
    <div class="header">
        <img src="images/mi-logo.png" alt="">
        <h1>小米商城</h1>
        <p>让每个人都能享受科技的乐趣</p>
    </div>     
	<!-- 导航栏 -->
	<div class="stages">
		<div class="stages_title">通知公告</div>
		<div class="stages_con">
			<marquee>
				<ul>
					<li><a href="#">【喜讯】小米11青春活力版现已推出！</a></li>
					<li><a href="#"> 小米所有机型均支持客户服务及售后.</a></li>
				</ul>
			</marquee>
		</div>
	</div>
    <div class="pic"> 
       <div class="content left-one">
            <div class="nav-center center">
                <span class="zhanghao" style="cursor: default">账号登陆</span>|<span class="ma" style="cursor: default">扫码登陆</span>
            </div>
			<!-- 账号登录/扫码登录 -->
            <div class="face center">
                <div class="logn">
                    <div class="middle">
                        <div class="form center" action="">
                            <input class="username" type="text" id="username" placeholder="邮箱/手机号/小米账号">
							<!-- 账号 -->
                            <input class="password" type="password" id="password" placeholder="密码">
							<!-- 密码 -->
                            <a href="./success.html">
                                <button class="denglu" id="loginbtn" onclick="return check(this.form);">登录</button>
                            </a>
							<!-- 登录 -->
                        </div>
                        <a id="zhuce" href="#">注册小米账号|忘记密码？</a>
                     </div>
                    <div class="bottom center">
                        <p class="nav-bottom">
                            <span class="left"></span>
                            其他方式登陆
                            <span class="right"></span>
                        </p>
                        <div class="foot">
                            <a href="#"><img src="images/zhifubao.png" style="height:40px;"></a>   <!-- 支付宝，微信，新浪，QQ -->
							&nbsp
							&nbsp
                            <a href="#"><img src="images/weixin.png" style="height:40px;"></a>
							&nbsp
							&nbsp
                            <a href="#"><img src="images/qq.png" style="height:40px;"></a>
							&nbsp
							&nbsp
                            <a href="#"><img src="images/xinlang.png" style="height:40px;"></a>
                        </div>
                    </div>
                </div>
                <div class="saoma center">
                    <img src="images/erweima1.PNG" alt="">
                    <p class="detail-one">使用支付宝、微信、QQ等APP扫一扫<br>小米手机可打开「设置」>「小米帐号」扫码登录</p>
                </div>
				<!-- 扫码登录 -->
            </div>
        </div>
    </div>
    <div class="underside">
        <a href="#">简体</a> |
        <a href="#">繁体</a>  |
        <a href="#">English </a> |
        <a href="#">常见问题</a> 
        <p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
    </div>
    <script>
        $(".nav-center span").click(function(){
            $(this).addClass("zhanghao").siblings().removeClass("zhanghao")   
			// 账号登录->扫码登录
            let index = $(this).index();
            console.log(index)
            $(".face>div").eq(index).show().show().siblings().hide()       
			//覆盖账号登录->展示扫码登录
        })
    </script>
</body>
</html>